<!-- 
  @name: 设置(个人中心)
  @date: 2020.3.19
 -->
<template>
	<view class="content">
		<!-- 顶部信息 -->
		<!-- <view class="infoview">
			<view class="info" v-if="isLogin">
				<image class="img" :src="userinfo.staffImg ? userinfo.staffImg : imgUser"></image>
				<view class="msg">
					<view class="top">{{userinfo.staffName}}</view>
					<view class="btm">{{userinfo.staffPhone}}</view>
				</view>
			</view>
			<view class="info" v-if="!isLogin">
				<image class="img" :src="imgUser"></image>
				<view class="msg">
					<view class="top" @tap="$navigateTo('/pages/login/index')">点击登录</view>
				</view>
			</view>
		</view> -->

		<view class="header u-f-ac">
			<template v-if="isLogin">
				<view class="avatar-box" @tap="$navigateTo('./info')">
					<image
						class="avatar"
						:src="userinfo.staffImg ? userinfo.staffImg : imgUser"
						mode="aspectFill"
					></image>
					<image class="edit" src="/static/my/bianji@2x.png" mode="aspectFill"></image>
				</view>

				<view class="info">
					<view class="name">{{ userinfo.staffName }}</view>
					<view class="phone">{{ userinfo.staffPhone }}</view>
				</view>
			</template>
			<template v-if="!isLogin">
				<view class="icon-2"></view>
				<view class="msg">
					<button class="get" @tap="$navigateTo('/pages/login/index')">
						点击登录账户
					</button>
				</view>
			</template>
		</view>

		<!-- 菜单 -->
		<view class="block-card">
			<block v-for="(item, index) in menuList" :key="index">
				<view class="card-item " hover-class="gray" @tap="inMenu(item, index)">
					<image
						:src="item.img"
						:style="{ width: item.iw + 'rpx', height: item.ih + 'rpx' }"
						mode="aspectFill"
					></image>
					<view>{{ item.text }}</view>
				</view>
			</block>
		</view>
		<!-- <view class="title">常用功能</view>
		<view class="menu">
			<view class="item" v-for="(item, index) in menuList" :key="index" @tap="inMenu(item, index)">
				<view :style="{width: '36rpx', height: item.ih + 'rpx', backgroundImage: 'url(' + item.img + ')'}"></view>
				<text class="text">{{item.text}}</text>
				<view class="arrow_nav"></view>
			</view>
		</view> -->

		<!-- 退出登录按钮 -->
		<!-- <view class="btn_pub" :class="userMain === 1 ? '' : 'fixed'" @tap="logout" v-show="isLogin">退出登录</view> -->

		<!-- 显示于tabbar之上，渲染阴影效果 -->
		<view class="tabbar_shadow"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			menu: [
				// {
				// 	iw: 60,ih: 60, text: '积分管理', path: '/pages/set-fill/index',
				// 	img: '/static/images/xuzhu.png'
				// },
				// {
				// 	iw: 51,
				// 	ih: 60,
				// 	text: '蓄注管理',
				// 	path: '/pages/set-fill/index',
				// 	img: '/static/images/xuzhu.png'
				// },
				{
					iw: 70,
					ih: 60,
					text: '充值管理',
					path: '/pages/set-recharge/index',
					img: '/static/images/chongzhi.png'
				},
				{
					iw: 66,
					ih: 60,
					text: '优惠券',
					path: '/pages/set-ticket/index',
					img: '/static/images/youhuiquan.png'
				},
				{
					iw: 60,
					ih: 60,
					text: '账号管理',
					path: '/pages/set-account/index',
					img: '/static/images/zhanghaoguanli.png'
				},
				{
					iw: 70,
					ih: 60,
					text: '交易流水',
					path: '/pages/set-state/index',
					img: '/static/images/liushui.png'
				},
				{
					iw: 66,
					ih: 60,
					text: '消息通知',
					path: '/pages/set-msg/index',
					img: '/static/images/xiaoxi.png'
				},
				{
					iw: 75,
					ih: 60,
					text: '关于运营商',
					path: '/pages/set-about/index',
					img: '/static/images/guanyu.png'
				},
				{
					iw: 75,
					ih: 60,
					text: '退出登录',
					path: '/pages/set-about/index',
					img: '/static/images/loginout.png'
				}
			],
			menuList: [], //菜单列表
			userMain: -1, //账号权限，0-子账号，1-主账号，2-加注站职员
			imgUser: this.$tmp.IMG_USER //默认头像
		};
	},
	computed: {
		isLogin() {
			//登录状态
			let status = this.$store.state.token ? true : false;
			return status;
		},
		userinfo() {
			//用户信息
			let info = this.$store.state.userinfo;
			if (info) return JSON.parse(info);
		}
	},
	onLoad() {
		this.setMenu();
	},
	onShow() {
		if (this.$store.state.reLogin) {
			this.setMenu();
			this.$store.commit('hasLogin');
		}
	},
	methods: {
		//设置菜单
		setMenu() {
			this.userMain = this.$store.state.userMain;
			this.menuList = [];
			if (this.userMain === 1) {
				this.menuList = JSON.parse(JSON.stringify(this.menu));
			} else {
				this.menuList.push(this.menu[0]);
				this.menuList.push(this.menu[4]);
				this.menuList.push(this.menu[5]);
				this.menuList.push(this.menu[6]);
				this.menuList.push(this.menu[7]);
			}
		},
		//进入菜单
		inMenu(item, index) {
			if (this.isLogin) {
				if (item.text === '退出登录') {
					uni.showModal({
						content: '确认退出登录吗？',
						success: rs => {
							if (rs.confirm) {
								uni.clearStorageSync();
								this.$store.commit('logout');
								this.$navigateTo('/pages/login/index');
							}
						}
					});
				} else {
					this.$navigateTo(item.path);
				}
			} else {
				this.$navigateTo('/pages/login/index');
			}
		},
		//退出登录
		logout() {
			uni.showModal({
				content: '确认退出登录吗？',
				success: rs => {
					if (rs.confirm) {
						uni.clearStorageSync();
						this.$store.commit('logout');
						this.$navigateTo('/pages/login/index');
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
/* 顶部信息 */
.infoview {
	width: 750rpx;
	height: 170rpx;
	padding: 0 60rpx;
	background-color: $color-primary;
	.info {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.img {
		width: 110rpx;
		height: 110rpx;
		border-radius: $border-radius-circle;
	}
	.msg {
		margin-left: 30rpx;
		.top {
			font-size: 36rpx;
			color: $color-white;
		}
		.btm {
			margin-top: 23rpx;
			color: $color-white;
			font-family: $font-family-num;
			opacity: 0.6;
		}
	}
}

/* 菜单 */
.title {
	width: 750rpx;
	padding-top: 50rpx;
	padding-left: 40rpx;
	padding-bottom: 20rpx;
	font-size: 36rpx;
	background-color: $color-white;
}
.menu {
	width: 750rpx;
	padding: 0 40rpx;
	background-color: $color-white;
	.item:last-child {
		border-bottom: none;
	}
	.item {
		width: 100%;
		height: 100rpx;
		border-bottom: 1rpx solid $color-list;
		display: flex;
		flex-direction: row;
		align-items: center;
		.text {
			flex: 1;
			margin-left: 44rpx;
		}
	}
	.list:last-child {
		border-bottom: none;
	}
}

/* 退出登录按钮 */
.btn_pub {
	margin-top: 50rpx;
	margin-bottom: 30rpx;
}
.btn_pub.fixed {
	position: fixed;
	left: 0;
	bottom: 0;
}

.gray {
	background-color: #e6e6e6;
}
.header {
	padding: 60rpx 70rpx;
	background-color: #ffffff;
	display: flex;
	align-items: center;

	.icon-2 {
		width: 120rpx;
		height: 120rpx;
		border-radius: $border-radius-circle;
		margin-right: 30rpx;
		background-image: url('http://img.etubang.com/group1/M00/00/40/rBCky15VxnWAPlelAAAL7dRmSaA245.png');
	}

	.msg {
		flex: 1;
		flex-direction: column;
		margin-left: 29rpx;
		.text {
			color: #333333;
		}
		.text.t1 {
			margin-top: 25rpx;
			font-family: $font-family-num;
		}
		.get {
			width: 240rpx;
			margin-left: -30rpx;
			font-size: 32rpx;
			color: #333333;
			background-color: rgba(255, 255, 255, 0);
		}
	}
	.avatar-box {
		position: relative;
		width: 120rpx;
		height: 120rpx;
		margin-right: 43rpx;
		flex-shrink: 0;
		.avatar {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}

		.edit {
			position: absolute;
			bottom: 6rpx;
			right: 6rpx;
			width: 37rpx;
			height: 37rpx;
		}
	}

	.info {
		.name {
			font-weight: bold;
			font-size: 38rpx;
			margin-bottom: 20rpx;
		}

		.phone {
			color: #656565;
			font-size: 36rpx;
		}
	}
}
.block-card {
	border-radius: 16rpx;
	display: flex;
	flex-wrap: wrap;
	background-color: #ffffff;
	height: 690rpx;
	margin: 30rpx 20rpx 0 20rpx;
	align-content: flex-start;
	.card-item {
		width: 33.3%;
		height: 33.3%;
		color: #666666;
		font-size: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		image {
			// width: 63rpx;
			// height: 63rpx;
			flex-shrink: 0;
			margin-bottom: 35rpx;
		}
	}
}
</style>
